<template>
    <div>
        <div>
            <el-form :inline="true" class="demo-form-inline">
                <!--      模糊-->
                <el-form-item>
                    <el-input
                            @keyup.native="onSearch"
                            v-model="search"
                            class="search_name"
                            size="mini"
                            placeholder="输入房号查询">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                            @keyup.native="onSearch"
                            v-model="search1"
                            class="search_name"
                            size="mini"
                            placeholder="输入业主查询">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                            @keyup.native="onSearch"
                            v-model="search2"
                            class="search_name"
                            size="mini"
                            placeholder="输入装修公司查询">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            type="text"
                            @click="onSearch()"
                            class="el-icon-search">查询
                    </el-button>
                </el-form-item>
                <!--      增加-->
                <el-form-item>
                    <el-button
                            class="el-icon-circle-plus-outline"
                            type="text"
                            @click="dialogVisible = true">添加
                    </el-button>
                    <el-button
                            class="el-icon-delete"
                            type="text"
                            @click="deleteAll(sels)">删除
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table :data="users.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe @selection-change="selsChange">
                <el-table-column type="selection" width="55" />//复选框
                <el-table-column label="编号" prop="id"/>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="业主名称" prop="yezhu.yname"/>
                <el-table-column label="装修公司" prop="zxgs"/>
                <el-table-column label="所属楼栋" prop="loudong2.dname"/>
                <el-table-column label="所属楼层" prop="louceng.cname"/>
                <el-table-column label="房号" prop="xuhao.xname"/>
                <el-table-column label="楼层及柜位号" prop="lcgwh"/>
                <el-table-column label="施工人员（人）" prop="sgry"/>
                <el-table-column label="装修保证金" prop="zxbzj"/>
                <el-table-column label="出入证押金" prop="crzyj"/>
                <el-table-column label="垃圾清运费" prop="ljqyf"/>
                <el-table-column label="出入证工本费" prop="crzgbf"/>
                <el-table-column label="装修备案证工本费" prop="zxbazgbf"/>
                <el-table-column label="动火备案证" prop="dhbaz"/>
                <el-table-column label="泄水费" prop="xsf"/>
            </el-table>
            <el-dialog
                    title="添加页面"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <el-form style="width: 40%" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="业主名称" prop="yid">
                        <el-select  v-model="ruleForm.yid" style="width: 300px">
                            <el-option v-for="item in selectList" :key="item.yid" :label="item.yname" :value="item.yid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="装修公司" prop="zxgs">
                        <el-input v-model="ruleForm.zxgs" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="所属楼栋" prop="did">
                        <el-select  v-model="ruleForm.did" style="width: 300px">
                            <el-option v-for="item in selectList1" :key="item.did" :label="item.dname" :value="item.did"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属楼层" prop="cid">
                        <el-select  v-model="ruleForm.cid" style="width: 300px">
                            <el-option v-for="item in selectList2" :key="item.cid" :label="item.cname" :value="item.cid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房号" prop="xid">
                        <el-select  v-model="ruleForm.xid" style="width: 300px">
                            <el-option v-for="item in selectList3" :key="item.xid" :label="item.xname" :value="item.xid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼层及柜位号" prop="lcgwh">
                        <el-input v-model="ruleForm.lcgwh" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="施工人员（人）" prop="sgry">
                        <el-input v-model="ruleForm.sgry" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="装修保证金" prop="zxbzj">
                        <el-input v-model="ruleForm.zxbzj" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="出入证押金" prop="crzyj">
                        <el-input v-model="ruleForm.crzyj" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="垃圾清运费" prop="ljqyf">
                        <el-input v-model="ruleForm.ljqyf" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="出入证工本费" prop="crzgbf">
                        <el-input v-model="ruleForm.crzgbf" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="装修备案证工本费" prop="zxbazgbf">
                        <el-input v-model="ruleForm.zxbazgbf" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="动火备案证" prop="dhbaz">
                        <el-input v-model="ruleForm.dhbaz" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="泄水费" prop="xsf">
                        <el-input v-model="ruleForm.xsf" style="width: 300px"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="addUser()" type="primary" size="medium">确 定</el-button>
          </span></span>
            </el-dialog>
            <el-dialog
                    title="修改页面"
                    :append-to-body='true'
                    :visible.sync="dialogUpdate"
                    width="30%"
            >
                <el-form style="width: 40%" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="业主名称" prop="yid">
                        <el-select  v-model="ruleForm.yid" style="width: 300px">
                            <el-option v-for="item in selectList" :key="item.yid" :label="item.yname" :value="item.yid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="装修公司" prop="zxgs">
                        <el-input v-model="ruleForm.zxgs" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="所属楼栋" prop="did">
                        <el-select  v-model="ruleForm.did" style="width: 300px">
                            <el-option v-for="item in selectList1" :key="item.did" :label="item.dname" :value="item.did"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属楼层" prop="cid">
                        <el-select  v-model="ruleForm.cid" style="width: 300px">
                            <el-option v-for="item in selectList2" :key="item.cid" :label="item.cname" :value="item.cid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="房号" prop="xid">
                        <el-select  v-model="ruleForm.xid" style="width: 300px">
                            <el-option v-for="item in selectList3" :key="item.xid" :label="item.xname" :value="item.xid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼层及柜位号" prop="lcgwh">
                        <el-input v-model="ruleForm.lcgwh" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="施工人员（人）" prop="sgry">
                        <el-input v-model="ruleForm.sgry" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="装修保证金" prop="zxbzj">
                        <el-input v-model="ruleForm.zxbzj" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="出入证押金" prop="crzyj">
                        <el-input v-model="ruleForm.crzyj" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="垃圾清运费" prop="ljqyf">
                        <el-input v-model="ruleForm.ljqyf" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="出入证工本费" prop="crzgbf">
                        <el-input v-model="ruleForm.crzgbf" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="装修备案证工本费" prop="zxbazgbf">
                        <el-input v-model="ruleForm.zxbazgbf" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="动火备案证" prop="dhbaz">
                        <el-input v-model="ruleForm.dhbaz" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="泄水费" prop="xsf">
                        <el-input v-model="ruleForm.xsf" style="width: 300px"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="updateUser()" type="primary" size="medium">确 定</el-button>
          </span></span>
            </el-dialog>
        </div>
        <div class="pagei">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "vue1",
        data() {
            return {
                selectList: {yname:'', yid:''},
                selectList1: {dname:'', did:''},
                selectList2: {cname:'', cid:''},
                selectList3: {xname:'', xid:''},
                dialogVisible: false,
                dialogUpdate: false,
                search: '',
                search1: '',
                search2: '',
                sels: [],//选中的值显示
                schArr: [], // 分页数据源
                pagesize: 3,
                currentPage: 1,
                total: 0,
                tableData: [],
                activeName: 'a',
                radio: '1',
                users: {},
                ruleForm: {
                    yid:'',
                    yname:'',
                    zxgs:'',
                    did:'',
                    dname:'',
                    cid:'',
                    cname:'',
                    xid:'',
                    xname:'',
                    lcgwh:'',
                    sgry:'',
                    zxbzj:'',
                    crzyj:'',
                    ljqyf:'',
                    crzgbf:'',
                    zxbazgbf:'',
                    dhbaz:'',
                    xsf:'',
                },
                formInline: {
                    yid:'',
                    yname:'',
                    zxgs:'',
                    did:'',
                    dname:'',
                    cid:'',
                    cname:'',
                    xid:'',
                    xname:'',
                    lcgwh:'',
                    sgry:'',
                    zxbzj:'',
                    crzyj:'',
                    ljqyf:'',
                    crzgbf:'',
                    zxbazgbf:'',
                    dhbaz:'',
                    xsf:'',
                },
            };
        },
        created() {
            const that = this;
            this.getPages();
            this.axios.post('http://localhost:8089/selectZhuzhaiList')
                .then(function (response) {
                    console.log(response);
                    that.users = response.data;
                }),
                this.axios.get('http://localhost:8089/selectList8')
                    .then(function (response) {
                        console.log(response);
                        that.selectList = response.data;
                    }),
                this.axios.get('http://localhost:8089/selectList9')
                    .then(function (response) {
                        console.log(response);
                        that.selectList1 = response.data;
                    }),
                this.axios.get('http://localhost:8089/selectList10')
                    .then(function (response) {
                        console.log(response);
                        that.selectList2 = response.data;
                    }),
                this.axios.get('http://localhost:8089/selectList11')
                    .then(function (response) {
                        console.log(response);
                        that.selectList3 = response.data;
                    })
        },
        methods:{
            handleEdit(index, row) {
                this.dialogUpdate = true;
                this.ruleForm = Object.assign({}, row); //这句是关键！！！
            },
            updateUser() {
                let postData = this.qs.stringify({
                    id: this.ruleForm.id,
                    yid: this.ruleForm.yid,
                    zxgs: this.ruleForm.zxgs,
                    did: this.ruleForm.did,
                    cid: this.ruleForm.cid,
                    xid: this.ruleForm.xid,
                    lcgwh: this.ruleForm.lcgwh,
                    sgry: this.ruleForm.sgry,
                    zxbzj: this.ruleForm.zxbzj,
                    crzyj: this.ruleForm.crzyj,
                    ljqyf: this.ruleForm.ljqyf,
                    crzgbf: this.ruleForm.crzgbf,
                    zxbazgbf: this.ruleForm.zxbazgbf,
                    dhbaz: this.ruleForm.dhbaz,
                    xsf: this.ruleForm.xsf,
                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8089/updateZhuzhai',
                    data:postData
                }).then(response =>
                {
                    this.axios.post('http://localhost:8089/selectZhuzhaiList').then(response =>
                    {
                        this.tableData = response.data;
                        this.currentPage = 1;
                        this.onSearch();
                        this.cancel()
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                    }).catch(error =>
                    {
                        console.log(error);
                        this.onSearch();
                    });
                    this.getPages();
                    this.dialogVisible = false
                    console.log(response);
                }).catch(error =>
                {
                    console.log(error);
                    this.onSearch();
                });
            },
            addUser() {
                let postData = this.qs.stringify({
                    yid: this.ruleForm.yid,
                    zxgs: this.ruleForm.zxgs,
                    did: this.ruleForm.did,
                    cid: this.ruleForm.cid,
                    xid: this.ruleForm.xid,
                    lcgwh: this.ruleForm.lcgwh,
                    sgry: this.ruleForm.sgry,
                    zxbzj: this.ruleForm.zxbzj,
                    crzyj: this.ruleForm.crzyj,
                    ljqyf: this.ruleForm.ljqyf,
                    crzgbf: this.ruleForm.crzgbf,
                    zxbazgbf: this.ruleForm.zxbazgbf,
                    dhbaz: this.ruleForm.dhbaz,
                    xsf: this.ruleForm.xsf,
                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8089/addZhuzhai',
                    data:postData
                }).then(response =>
                {
                    this.axios.post('http://localhost:8089/selectZhuzhaiList').then(response =>
                    {
                        this.tableData = response.data;
                        this.currentPage = 1;
                        this.onSearch();
                        this.cancel();
                        this.$message({
                            type: 'success',
                            message: '已添加!'
                        });
                    }).catch(error =>
                    {
                        console.log(error);
                        this.onSearch();
                    });
                    this.getPages();
                    this.dialogVisible = false
                    console.log(response);
                }).catch(error =>
                {
                    console.log(error);
                    this.onSearch();
                });
            },
            selsChange(sels) {
                this.sels = sels
            },
            onSearch() {
                let postData = this.qs.stringify({
                    xname: this.search,
                    yname: this.search1,
                    zxgs: this.search2,
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8089/selectZhuzhaiList',
                    data: postData
                }).then(response =>
                {
                    this.getPages();
                    this.users = response.data;
                    this.disablePage = true;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            handleSizeChange(val) {
                this.getPageData();
                var s = this
                console.log(`每页 ${val} 条`);
                s.pagesize = val;
                s.getPageData();
                console.log(s.pagesize);
            },
            handleCurrentChange(val) {
                this.getPageData();
                var ss = this
                console.log(`当前页: ${val}`);
                ss.currentPage = val;
                ss.getPageData();
                console.log(ss.currentPage);
            },
            getPageData() {
                console.log("是否yes");
                var thats = this
                let start = (this.currentPage - 1) * this.pagesize;
                let end = start + this.pagesize;
                this.schArr = thats.users.slice(start, end);
                this.total = thats.users.length;
            },
            getPages() {
                let postData = this.qs.stringify({
                    xname: this.search,
                    yname: this.search1,
                    zxgs: this.search2,
                })
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8089/getZhuzhaiCount',
                    data: postData
                }).then(response =>
                {
                    this.total = response.data;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            deleteAll() {
                var ids= this.sels.map(item => item.id).join()//获取所有选中行的id组成的字符串，以逗号分隔
                console.log(ids);
                this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        this.axios.post('http://localhost:8089/deleteZhuzhaiBatch?ids='+ids);
                        console.log("删除成功")
                        this.onSearch();
                    }
                )
            },
            cancel() {
                this.ruleForm.yid='',
                    this.ruleForm.zxgs='',
                    this.ruleForm.did='',
                    this.ruleForm.cid='',
                    this.ruleForm.xid='',
                    this.ruleForm.lcgwh='',
                    this.ruleForm.sgry='',
                    this.ruleForm.zxbzj='',
                    this.ruleForm.crzyj='',
                    this.ruleForm.ljqyf='',
                    this.ruleForm.crzgbf='',
                    this.ruleForm.zxbazgbf='',
                    this.ruleForm.dhbaz='',
                    this.ruleForm.xsf='',
                    this.dialogVisible = false;
                this.dialogUpdate=false
            },
        }
    }
</script>

<style scoped>

</style>